<template>
    <div class="budget">
      <el-row>
        <el-col :span="24">
          <lineChart
            v-if="dataArr.length !== 0"
            :lineData="dataArr"
            :xData="xData"
            :width="width"
            :height="height"
          />
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import lineChart from "@/views/home/budget/components/lineChart.vue";
  export default {
    name: "budget",
    components: {
      lineChart,
    },
    props: {
      comBudgetdata: {
        type: Object,
        default: {},
      },
      width: {
        type: String,
        default: "100%",
      },
      height: {
        type: Number,
        default: 200,
      },
    },
    data() {
      return {
        dataArr: [],
        xData: [],
      };
    },
    mounted() {
      // console.log(this.comBudgetdata, 9999);
      // this.getBudgetdata();
    },
    created() {},
    watch: {
      comBudgetdata: {
        handler(val) {
          if (val) {
            this.getBudgetdata();
          }
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      getBudgetdata() {
        this.xData = [];
        this.dataArr = [];
        // console.log(this.comBudgetdata, 111);
        this.xData = this.comBudgetdata.budgetManageStatics.xData;
        let yData = this.comBudgetdata.budgetManageStatics.yData;
        // let colorArr = ["#3669D4", "#32B69F", "#4F5467", "#E1B228", "#C44729"];
        // console.log(yData, this.xData);
        if (yData != undefined) {
          if (yData.length > 0) {
            yData.map((item) => {
              let obj = {
                name: item.name,
                data: item.data,
                type: "line",
                showSymbol: false,
                smooth: true,
                lineStyle: {
                  width: 2,
                  // color: colorArr[index].color,
                },
                itemStyle: item.itemStyle,
                areaStyle: {
                  opacity: 0.4,
                },
                // 高亮
                emphasis: {
                  focus: "series",
                },
              };
              this.dataArr.push(obj);
            });
          } else {
            let obj = {
              name: "",
              data: [
                "0.00",
                "0.00",
                "0.00",
                "0.00",
                "0.00",
                "0.00",
                "0.00",
                "0.00",
                "0.00",
                "0.00",
                "0.00",
                "0.00",
              ],
              type: "line",
              showSymbol: false,
              smooth: true,
              lineStyle: {
                width: 2,
                // color: colorArr[index].color,
              },
              areaStyle: {
                opacity: 0.4,
                // color: "#5B8FF9",
              },
              // 高亮
              emphasis: {
                focus: "series",
              },
            };
            this.dataArr.push(obj);
          }
        }
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .budget {
    // height: 350px;
    width: 100%;
  }
  </style>
  